<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>标签切换</title>
		<style>
		.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
		.f-cb,.f-cbli li{zoom:1;}
			ul,li{padding: 0; margin: 0;}
			ul{list-style: none;}
			#J_tabTt{
				clear: both;
				/*background-color:wheat;*/
			}
			#J_tabTt li{
				float: left;
				width: 60px;
				height: 30px;
				margin-right: 10px;
				cursor: pointer;
			}
			#J_tabCt{
				width: 300px;
				height: 200px;
				border: 1px solid crimson;
			}
			#J_tabCt li{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="J_Tab">
			<ul id="J_tabTt" class="f-cb">
				<li data-index = "0">男装</li>
				<li data-index = "1">女装</li>
				<li data-index = "2">箱包</li>
			</ul>
			<!-- 标签内容 -->
			<ul id="J_tabCt">
				<li data-index = "0">男装……</li>
				<li data-index = "1">女装……</li>
				<li data-index = "2">箱包……</li>
			</ul>
		</div>
		<!-- 标签名 -->
		<script type="text/javascript" src="static/js/jquery/jquery-1.9.1.min.js" ></script>
		<script src="static/common/js/jquery/my_plugs/jquery.tab.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$("#J_Tab").tab();
		</script>
	</body>

</html>